<template>
	<view>
		<!-- 自定义导航栏 -->
		<view class="navBarBox">
			<!-- 状态栏占位 -->
			<view class="statusBar" :style="{ paddingTop: statusBarHeight + 'px' }"></view>
			<!-- 真正的导航栏内容 -->
			<view class="navBar">
				<view class="navTitle">记吧单词</view>
			</view>
		</view>
		<!-- 页面内容 -->
		<view class="pagebody">
			<view class="container">
				<van-field :value="word " placeholder="请输入要翻译的内容" border="false" @input="getword"
					custom-style="border-radius: 50px;width:250px;" />
				<van-button round color="linear-gradient(to right, #4bb0ff, #6149f6,#dcdcdc)"
					custom-style="margin-left:5px" size="small" @click="translate">翻译</van-button>
			</view>
			<!-- <view class="imgbox">
				<image src="../../static/image/哆啦A梦.jpg" mode="widthFix" class="bodyImg"></image>
			</view> -->

			<view class="learning" style="margin-top: 5px ;" @click="showbookPicker">
				{{learnbook}}
			</view>
			<view class="learning" style="" @tap="showPicker">今日计划学习{{planNum}}词</view>
			<view class="learning" style="flex-direction: row;">
				<view class="learning-pass">今日已学习{{studyNum}}词</view>
				<hr style="height: 90%;width: 2px;background-color: darkgray;" />
				<view class="learning-pass">待复习{{reviewNum}}词</view>
			</view>

			<view class="button-box" :style="{transform: `translate(0px,${screenHeight-statusBarHeight-440}px)`}">
				<button class="mbutton uni-shadow-lg" @click="goHomeWork()" hover-class="hover">测试</button>
				<button class="mbutton uni-shadow-lg" hover-class="hover" @click="goDictation()">听写</button>
			</view>
			<view class="button-box" :style="{transform: `translate(0px,${screenHeight-statusBarHeight-540}px)`}">
				<button class="mbutton uni-shadow-lg" @click="goStudy" hover-class="hover">学习</button>
				<button class="mbutton uni-shadow-lg" hover-class="hover" @click="goReview()">复习</button>


				<!-- 记得补上 -->


			</view>
			<strong></strong>
			<view class="bottomView" :style="{transform: `translate(0px,${screenHeight-statusBarHeight-44-300-50}px)`}">
			</view>
		</view>
	</view>
	<view>
		<!-- 提示窗示例 -->
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog type="warn" cancelText="取消" confirmText="去登录" title="提示" :content="tipContent"
				@confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
		</uni-popup>
		<van-popup :show="isShowPicker" @close="onClosePicker" round position="bottom" @click-overlay="closePopup">
			<van-picker :columns="quantity" @change="onChangePicker" />
		</van-popup>
		<van-popup :show="isShowbookPicker" round position="bottom" @click-overlay="closebookPopup">
			<van-picker :columns="books" @change="onChangebookPicker" />
		</van-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 状态栏高度
				statusBarHeight: 0,
				// 导航栏高度
				navBarHeight: 82 + 11,
				screenHeight: 0,
				tipContent: '',
				selectInfo: [],
				isGo: false,
				word: '',
				translation: '',
				learnbook: "请选择学习内容",
				chooseBookId: 0,
				studyNum: 0,
				reviewNum: 0,
				planNum: 0,
				quantity: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
				isShowPicker: false,
				isShowbookPicker: false,
				books: Array()
			}
		},
		onLoad() {
			let api = this.$Api;
			if (api.params.meta.token == "") {
				uni.login({
					provider: 'weixin',
					univerifyStyle: {
						fullScreen: true
					},
					success: function(loginRes) {
						api.auth(loginRes.code).then(res => {
							if (res.data.data.id != '' && res.data.data.token != '') {
								uni.setStorageSync('uid', res.data.data.id);
								uni.setStorageSync('token', res.data.data.token);
							}
							uni.setStorageSync('openid', res.data.data.openid);
						});
					}
				});
			} else {}
		},
		methods: {
			goHomeWork() {
				if (uni.getStorageSync('token') === '') {
					this.isGo = true;
					this.goLogin()
				} else {
					uni.navigateTo({
						url: 'homework/homework'
					});
				}
			},
			goStudy() {
				if (this.planNum != 0 && this.chooseBookId != 0) {
					if (this.chooseBookId == 3) {
						uni.navigateTo({
							url: "/pages/index/study/study?planNum=" + this.planNum + "&chooseBookId=" + this.chooseBookId + "&learnbook=" +this.learnbook
						});
					} else {
						uni.showToast({
							title: '暂无该教程资源！',
							duration: 2000,
							icon: 'error'
						})
					}
				} else {
					uni.showToast({
						title: '请制定学习计划！',
						duration: 2000,
						icon: 'error'
					})
				}
			},
			goReview() {
				uni.navigateTo({
					url: "/pages/index/review/review?reviewNum=" + this.reviewNum
				})
			},

			goLogin() {
				this.$refs.alertDialog.open();
				this.tipContent = `您未登录，请先登录！`;
				this.isGo = true;

			},
			dialogConfirm() {
				console.log('点击了确认');
				if (this.isGo) {
					uni.navigateTo({
						url: '../login/login'
					});
				}
			},
			dialogClose() {
				console.log('点击了取消')
			},
			goDictation() {
				let _this = this;
				uni.getStorage({
					key: 'openid',
					success(res) {
						console.log(res.data);
						if (res.data != '') {
							uni.navigateTo({
								url: 'dictationTest/dictationTest'
							});
						}
					},
					fail(err) {
						console.log(err.errMsg);
						if (err.errMsg == 'getStorage:fail data not found') {
							_this.goLogin()
						}
					}
				});
			},
			translate() {
				//在起始页面跳转到test.vue页面并传递参数
				uni.navigateTo({
					url: '/pages/index/translate/translate?word=' + this.word
				});

			},
			getword(e) {
				this.word = e.detail;
			},
			onChangePicker(e) {
				this.planNum = e.detail.value
			},
			onChangebookPicker(e) {
				this.learnbook = e.detail.value.text;
				this.chooseBookId = e.detail.value.id;
			},
			showPicker() {
				this.isShowPicker = true;
			},
			showbookPicker() {
				this.isShowbookPicker = true;
			},
			closebookPopup() {
				this.isShowbookPicker = false;
			},
			onClosePicker(e) {},
			closePopup() {
				this.isShowPicker = false;
			},

			async getStudyBooks() {
				let newbooks = [];
				const get = await this.$Api.getStudyBooks().then(res => {
					let study = res.data.data.study;
					for (var key in study) {
						var item = {
							text: study[key].type + study[key].name + '英语单词',
							id: study[key].id
						};
						newbooks.push(item);
					}
				}).catch(err => {
					console.log(err);
				});
				this.books = newbooks;
			}
		},
		//第一次加载时调用
		created() {
			//获取手机状态栏高度
			var systemInfo = uni.getSystemInfoSync()
			this.statusBarHeight = systemInfo['statusBarHeight'];
			console.log(this.statusBarHeight);
			this.screenHeight = systemInfo['screenHeight'];
			this.getStudyBooks();
		},
	}
</script>

<style>
	.header {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 20px;
	}

	.input {
		margin-right: 10px;
	}

	.result {
		margin-top: 20px;
	}

	.statusBar,
	.navBar {
		background-color: #2979ff;
	}

	.navBar {
		height: 2.75rem;
	}

	.navBarBox .navBar {
		padding: 3rpx 50rpx;
		padding-bottom: 8rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.navTitle {
		font-size: 1rem;
		font-weight: 700;
	}

	.pagebody {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.imgbox {
		background-color: #dcdcdc;
		z-index: 0;
	}

	.bodyImg {
		width: 100%;
	}

	.bottomView {
		width: 100%;
		border-radius: 1.5625rem 1.5625rem 0 0;
		z-index: 1;
		height: 18.75rem;
		background-color: rgb(219, 220, 255);
		backdrop-filter: blur(10px);
		position: absolute;
	}

	.button-box {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
		position: absolute;
		top: 130px;
		z-index: 5;
	}

	.mbutton {
		background: radial-gradient(circle, #2979ff, #94bcff);
		color: white;
		width: 140px;
		height: 70px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 0;
	}

	.hover {
		background-color: #94bcff;
		top: 3px;
	}

	.container {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		height: 50px;
		background-color: #cbcbcb;
	}

	.header {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 20px;
	}

	.input {
		margin-right: 10px;
	}

	.button {
		background-color: #94bcff;
	}

	.learning {
		box-shadow: 0px 0px 5px 10px rgba(0, 0, 0, 0.1);
		display: flex;
		align-items: center;
		justify-content: center;
		height: 65px;
		background: radial-gradient(circle, #2979ff, #94bcff);
		width: 95%;
		align-self: center;
		margin: 1px;
	}

	.learning-pass {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		width: 50%;
	}

	page {
		background-color: #dedede;
	}
</style>